<template>
  <!-- 保持原有模板结构不变 -->
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">电子木鱼</view>
      <view class="nav-subtitle">功德 +{{ meritCount }}</view>
    </view>

    <!-- 木鱼主体 -->
    <view class="wooden-fish-container">
      <image 
        class="wooden-fish" 
        :src="currentSkin.image"
        :class="{ 'tap-animation': isTapping }"
        @click="manualKnock"
      />
    </view>

    <!-- 控制面板 -->
    <view class="control-panel">
      <button class="auto-btn" @click="toggleAutoKnock">
        {{ isAutoKnocking ? '停止自动' : '自动敲击' }}
      </button>
      <button 
        class="change-skin-btn" 
        @click="changeSkin"
        :disabled="meritCount < 100 || isChanging"
      >
        {{ isChanging ? '加载音效中...' : `换皮肤（需100功德）` }}
      </button>
    </view>

    <!-- 皮肤选择弹窗 -->
    <view v-if="showSkinSelect" class="skin-modal">
      <view class="modal-header">
        <text class="modal-title">选择皮肤</text>
        <text class="close-btn" @click="showSkinSelect = false">×</text>
      </view>
      
      <view class="skin-list">
        <view 
          v-for="(skin, index) in skins" 
          :key="index"
          class="skin-item"
          @click="selectSkin(index)"
        >
          <image :src="skin.image" class="skin-preview"/>
          <text class="skin-name">{{ skin.name }}</text>
        </view>
      </view>

      <view class="modal-footer">
        <button class="return-btn" @click="showSkinSelect = false">
          返回
        </button>
      </view>
    </view>
  </view>
</template>

<script>
// 皮肤配置（使用绝对路径）
const skins = [
  {
    name: '黑白木鱼',
    image: '/static/MuYu/muyu1.jpg',
    sound: '/static/MuYu/muyu.mp3'
  },
  {
    name: '经典木鱼',
    image: '/static/MuYu/muyu2.png',
    sound: '/static/MuYu/muyu.mp3'
  }
];

export default {
  data() {
    return {
      meritCount: 0,
      isTapping: false,
      isAutoKnocking: false,
      isChanging: false,
      showSkinSelect: false,
      currentSkinIndex: 0,
      autoTimer: null,
      knockSound: null // 用于存储音频上下文
    };
  },
  computed: {
    currentSkin() {
      return skins[this.currentSkinIndex];
    },
    skins() {
      return skins;
    }
  },
  mounted() {
    this.loadSavedData();
  },
  methods: {
    // 手动敲击
    manualKnock() {
      if (this.isAutoKnocking) return;
      this.playKnock();
      this.meritCount++;
      this.saveData();
    },

    // 自动敲击开关
    toggleAutoKnock() {
      this.isAutoKnocking = !this.isAutoKnocking;
      if (this.isAutoKnocking) {
        this.startAutoKnock();
      } else {
        this.stopAutoKnock();
      }
    },

    // 启动自动敲击
    startAutoKnock() {
      this.autoTimer = setInterval(() => {
        this.playKnock();
        this.meritCount++;
        this.saveData();
      }, 1000);
    },

    // 停止自动敲击
    stopAutoKnock() {
      clearInterval(this.autoTimer);
      this.autoTimer = null;
    },

    // 播放音效
    playKnock() {
      if (!this.knockSound) return;
      
      try {
        const systemInfo = uni.getSystemInfoSync();
        if (systemInfo.platform === 'ios') {
          this.knockSound.seek(0);
          this.knockSound.play();
        } else {
          this.knockSound.stop();
          this.knockSound.play();
        }
      } catch (e) {
        console.error('播放失败:', e);
      }
      this.triggerTapAnimation();
    },

    // 触发点击动画
    triggerTapAnimation() {
      this.isTapping = true;
      setTimeout(() => {
        this.isTapping = false;
      }, 200);
    },

    // 更换皮肤
    async changeSkin() {
      if (this.meritCount < 100) return;
      
      this.isChanging = true;
      this.meritCount -= 100;
      this.showSkinSelect = true;
      this.saveData();
    },

    // 选择皮肤
    selectSkin(index) {
      this.currentSkinIndex = index;
      this.initAudio();
      this.showSkinSelect = false;
      this.isChanging = false;
      this.saveData();
    },

    // 初始化音频
    initAudio() {
      if (this.knockSound) {
        this.knockSound.destroy();
      }
      
      this.knockSound = uni.createInnerAudioContext();
      this.knockSound.src = this.currentSkin.sound;
      this.knockSound.volume = 0.8;
      
      // 错误处理
      this.knockSound.onError((res) => {
        uni.showToast({
          title: `音效错误: ${res.errMsg}`,
          icon: 'none'
        });
      });
    },

    // 加载保存数据
    loadSavedData() {
      try {
        const saved = uni.getStorageSync('woodenFish') || {};
        this.meritCount = saved.meritCount || 0;
        this.currentSkinIndex = saved.skinIndex || 0;
        this.initAudio();
      } catch (e) {
        console.error('读取存储失败:', e);
      }
    },

    // 保存数据
    saveData() {
      try {
        uni.setStorageSync('woodenFish', {
          meritCount: this.meritCount,
          skinIndex: this.currentSkinIndex
        });
      } catch (e) {
        console.error('保存失败:', e);
      }
    }
  },
  beforeDestroy() {
    this.stopAutoKnock();
    if (this.knockSound) {
      this.knockSound.destroy();
    }
  }
}
</script>

<style lang="scss" scoped>
/* 保持原有样式不变 */
.container {
  background-color: #000000;
  min-height: 100vh;
}

.nav-bar {
  padding: 40rpx 0;
  text-align: center;
  color: #ffffff;
  
  .nav-title {
    font-size: 40rpx;
    margin-bottom: 16rpx;
  }
  
  .nav-subtitle {
    font-size: 32rpx;
    opacity: 0.9;
  }
}

.wooden-fish-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80rpx;
  
  .wooden-fish {
    width: 600rpx;
    height: 450rpx;
    transition: transform 0.1s;
    
    &.tap-animation {
      transform: scale(0.95);
    }
  }
}

.control-panel {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  
  button {
    width: 45%;
    padding: 30rpx;
    border-radius: 50rpx;
    font-size: 28rpx;
    
    &.auto-btn {
      background: #4CAF50;
      color: white;
    }
    
    &.change-skin-btn {
      background: #FF9800;
      color: white;
      
      &[disabled] {
        background: #ccc;
        opacity: 0.7;
      }
    }
  }
}

.skin-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: modalShow 0.3s ease;

  .modal-header {
    width: 80%;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    color: white;

    .close-btn {
      font-size: 40rpx;
      padding: 0 20rpx;
    }
  }

  .skin-list {
    background: white;
    padding: 40rpx;
    border-radius: 20rpx;
    width: 80%;
    max-height: 60vh;
    overflow-y: auto;

    .skin-item {
      padding: 20rpx;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;

      .skin-preview {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }

      .skin-name {
        font-size: 28rpx;
      }
    }
  }

  .modal-footer {
    margin-top: 40rpx;
    width: 80%;

    .return-btn {
      width: 100%;
      background: #007AFF;
      color: white;
      border-radius: 50rpx;
      padding: 20rpx 0;
      font-size: 28rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

@keyframes modalShow {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>